<template>
  <!-- 展开收起 -->
  <div class="elementCollapse anim box1">
    <div class="collapseBoxMain">
      <slot name="normal">正常内容</slot>

      <div v-show="show" class="anim">
        <slot name="expand">展开内容</slot>

      </div>
    </div>

    <span class="collapseBtnCont">
      <span v-if="show" class="collapseBtn f-cp f-tac f-fs14 f-bt shouqiButton" @click="onClose()">
        <slot name="normalText">正常内容</slot>
      </span>
      <span v-if="!show" class="collapseBtn f-cp f-tac f-fs14 f-bt zhankaiButton" @click="onExpand()">
        <slot name="expandText">正常内容</slot>
      </span>
    </span>

  </div>
</template>
  
  <script setup>
  import { h, ref, reactive, toRefs, watchEffect, computed, watch, onUpdated, onBeforeUpdate, onBeforeMount, onMounted } from "vue";

  const data = reactive({ formData: {} })
  // props接收数据
  const props = defineProps({
    show: {
      type: Boolean,
      default: false
    },
    // 多种类型
  });

  const emit = defineEmits(["change", 'update:show']);
  // emit("change", data.value); // 事件触发
  const onClose = function() {
    // show = !show
    emit('update:show', false); // 双向绑定数据改变,update必须结合v-model

  }
  
  const onExpand = function () {
    // console.log(11111,222222222222222)
    // show = !show
    emit('update:show', true); // 双向绑定数据改变,update必须结合v-model

  }
  </script>
  
  <style lang='css' scoped>
  /* .router-slid-enter-active, .router-slid-leave-active {
    transition: all .4s;
  }
  .router-slid-enter, .router-slid-leave-active {
    transform: translate3d(0, 3rem, 0);
    opacity: 0;
  } */

  /* .anim {
    transition: background 0.5s;
  } */

  /* .box1 {
    width: 300px;
    height: 20px;
    transition: height 0.3s;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
  }

  .box1:hover {
    height: 300px;
  } */

</style>